<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>02_data的两种写法</title>
  <script type="text/javascript" src="./../vue.js/vue.js"></script>
</head>

<body>
  <div id="root">
    <h1>你好, {{name}}</h1>
  </div>

  <script>
    Vue.config.productionTip = false;

    new Vue({
      el: '#root',
      // data 的第一种写法: 对象式
      /* 
          data: {
            name: 'hello vue'
          }
      */


      // data 的第二种写法: 函数式
      data() {
        console.log('@@@', this)   // 此处的this 是 Vue 实例对象
        return {
          name: 'hello vue',
        }
      }
    })
  </script>
</body>

</html>
<!-- 
  2. data 有 2 种写法
    (1). 对象式
    (2). 函数式
    如何选择: 目前哪种写法都可以, 以后学习到组件的时候, data必须使用函数式, 否则会报错.
  3. 一个重要的原则:
    由 Vue 管理的函数, 一定不要写箭头函数, 一旦写了箭头函数, this 就不在是 Vue 实例了
-->